<!--  -->
<style lang="less">
	.goods_list {
		.top {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
		}

		.tabs {
			display: flex;
			background-color: #fff;

			.active {
				color: red;
				border-bottom: 1rpx solid red;
			}

			text {
				flex: 1;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.kong {
			margin-top: 200rpx;

			image {
				width: 100%;
			}
		}

		.list {
			margin-top: 200rpx;

			.searchlist {
				background-color: #FFFFFF;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;

				image {
					width: 250rpx;
					padding: 10rpx;
					box-sizing: border-box;
					height: 200rpx;
				}

				.right {
					flex: 1;
					font-size: 30rpx;

					.title {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
					}

					text {
						color: mediumvioletred;
					}
				}
			}
		}

		.my_btn {
			background-color: red;
			padding: 15rpx;

			.input {
				border-radius: 15rpx;
				font-size: 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #fff;
				text-align: center;
			}
		}
	}
</style>
<template>
	<view class="goods_list">
		<div class="top">
			<view class="my_btn">
				<input type="text" v-model="inputVal" placeholder="请输入关键字" class="input" @confirm="golist" />
			</view>
			<view class="tabs">
				<text v-for="(item,index) in tabs" @click="tabnav(index)" :key="index"
					:class="{active:indexid == index}">{{item}}</text>
			</view>
		</div>
		<view class="kong" v-if="searchlist.length == 0">
			<image
				src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fc6ac03e15f4b5efc7e2a268970ce660baab1ba21.jpg_320x200.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663241098&t=7025eb03c453abb6dd9a6f7d5944feed"
				mode="widthFix"></image>
		</view>
		<view class="list" v-else>
			<view class="searchlist" v-for="(item,index) in searchlist" @click="godetail(item.goods_id)" :key="index">
				<image :src="item.goods_small_logo || '../../static/52b1464290643af26775f95b539de4c0.jpeg'"></image>

				<view class="right">
					<view class="title">
						{{item.goods_name}}
					</view>
					<text>￥{{item.goods_price}}元</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		api
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				tabs: ['综合', '销量', '价格'],
				indexid: 0,
				cid: 0,
				searchlist: [],
				filterlist: [],
				pager: {
					pagenum: 1,
					pagesize: 7,
					total: 0
				},
				inputVal: ''
			}
		},
		onLoad(o) {
			if (o.inputVal) {
				console.log(o.inputVal);
				this.cid = `query=${o.inputVal}`
			} else {
				this.cid = `cid=${o.id}`
			}
			this.getsearch()

		},
		methods: {
			getsearch() {
				api({
					url: `public/v1/goods/search?${this.cid}&pagenum=${this.pager.pagenum}&pagesize=${this.pager.pagesize}`
				}).then(res => {
					this.searchlist = [...this.searchlist, ...res.message.goods]
					this.filterlist = res.message.goods
					this.pager.total = res.message.total
				})
			},
			tabnav(index) {
				this.indexid = index
				if (index == 0) {
					this.searchlist = []
					this.getsearch()
				} else if (index == 2) {
					this.searchlist = this.filterlist.sort((a, b) => {
						return a.goods_price - b.goods_price
					})
				} else if (index == 1) {
					this.searchlist = this.filterlist.sort((a, b) => {
						return a.upd_time - b.upd_time
					})
				}
			},
			godetail(id) {
				uni.navigateTo({
					url: `/pages/goods_detail/goods_detail?cid=${id}`
				});
			},
			onReachBottom() {
				// console.log(1);
				if (this.searchlist.length > this.pager.total) {
					// console.log(1213123123);
					uni.showToast({
						title: "没有了",
						icon: 'none',
						// 1.5秒点一次
						mask: true
					})
				} else {
					this.pager.pagenum + 1
					this.getsearch()
				}


			},
			onPullDownRefresh() {
				uni.showToast({
					title: "刷新成功",
					icon: 'none',
					// 1.5秒点一次
					mask: true
				})
				this.pager.pagenum = 1
				this.getsearch()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 5000);
			},
			golist() {
				this.searchlist = []
				this.cid = `query=${this.inputVal}`
				this.getsearch()
			}
		},

	}
</script>
